import "./index.scss"
import {ScrollView, Text, View} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useState} from "react"
import Taro, {useDidHide, useDidShow, useRouter, useUnload} from "@tarojs/taro"
import {DatePickerRow} from "@/components/date"
import {HistoryCard} from "./components"
import {paramsHistoryStore} from "./model"

const Paramshistory: React.FC = (): JSX.Element => {
	let router = useRouter()
	const [devName, setDevName] = useState("")
	const {
		initPageData,
		dataList,
		updatePageQuery,
		addPage,
		canUpDate,
		changeDateRange,
		updateHistory
	} = useContext(paramsHistoryStore)

	// 对应 onShow
	useDidShow(() => {
		console.log("Paramshistory useDidShow", JSON.parse(JSON.stringify(dataList)))
		updatePageQuery(router.params)
		if (router.params.devName) {
			setDevName(router.params.devName)
		}
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Paramshistory useDidHide")
	})
	useUnload(() => {
		initPageData()
	})
	return (
		<View className="h-screen bg-xx_bg overflow-hidden pt-24 flex flex-col">
			<View className="w-full mb-24 px-16">
				<Text className="hanzi text-16 font-bold">历史记录</Text>
				<Text className="hanzi text-14 text-xx_text">{devName ? " - " + devName : ""}</Text>
			</View>
			<DatePickerRow
				pickerDateAutoDefault={false}
				defaultAppointedDate="day"
				changeDateRange={(s, e) => {
					setTimeout(() => {
						changeDateRange(s, e)
					})
				}}
			></DatePickerRow>
			<ScrollView
				className="flex-1 overflow-auto pb-24"
				scrollY={true}
				lower-threshold="200"
				onScrollToLower={() => {
					console.log("历史记录继续加载")
					canUpDate &&
						addPage(() => {
							updateHistory()
						})
				}}
			>
				{dataList.map(item => (
					<HistoryCard option={item}></HistoryCard>
				))}
				{/* {
          !canUpDate ? <View className='text-12 px-16 my-12 text-center'>已经到底了~</View> : null
        } */}
				{canUpDate && !dataList.length ? (
					<View className="text-12 px-16 my-12 text-center">暂无历史记录~</View>
				) : null}
			</ScrollView>
		</View>
	)
}
export default observer(Paramshistory)
